<template>
  <div class="wrapper-fixed">
    <div class="action-bar-wrapper">
      <el-col :span="24" class="action-bar">
        <el-input v-model="searchText" placeholder="输入关键字" style="width:300px"></el-input>
        <el-select v-model="consumtationOption" clearable placeholder="资讯类型" style="margin:0 20px;">
          <el-option
            v-for="item in consumtationOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
<!--        <el-select v-model="officalCommentOption" clearable placeholder="官方点评" style="margin:0 20px;">-->
<!--          <el-option-->
<!--            v-for="item in officalCommentOptions"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value">-->
<!--          </el-option>-->
<!--        </el-select>-->
        <el-button type="primary" size="medium" @click="search">检索</el-button>
        <el-button type="primary" size="medium" @click="toConsultionEditor('')">添加</el-button>
<!--        <el-button type="primary" size="medium" @click="syncNewsMaterialFromWeChat">同步微信文章</el-button>-->
      </el-col>
<!--      <el-col class="action-bar screen">-->
<!--&lt;!&ndash;        <el-checkbox label="行业" name="industry" v-model="showColumns.industry"></el-checkbox>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-checkbox label="地区" name="area" v-model="showColumns.area"></el-checkbox>&ndash;&gt;-->
<!--        <el-checkbox label="咨讯标签" name="tag" v-model="showColumns.tag"></el-checkbox>-->
<!--&lt;!&ndash;        <el-checkbox label="官方点评" name="comment" v-model="showColumns.comment"></el-checkbox>&ndash;&gt;-->
<!--        <el-checkbox label="发布时间" name="creatAt" v-model="showColumns.creatAt"></el-checkbox>-->
<!--      </el-col>-->
    </div>

    <!-- 列表 -->
    <el-table
      :data="tableData"
      v-loading="loadingShow"
      element-loading-text="拼命加载中"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="标题"
        show-overflow-tooltip
        width="180">
        <template slot-scope="scope">

          <div @click.stop="showConsultation(scope.row.id)"
               style="whiteSpace:nowrap;overflow:hidden;textOverflow:ellipsis;cursor:pointer;color:#409EFF">
            {{scope.row.title}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="classify_name"
        label="资讯类型"
        width="120"
      >
      </el-table-column>

      <el-table-column
        prop="browse_num"
        label="浏览"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="attention_num"
        label="关注"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="from_name"
        label="来源"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label="展示"
        width="100"
      >
        <template slot-scope="scope">
          <div style="cursor: pointer" @click="changeNewsStatus(scope.row.id)">
            <el-tag type="success" v-if="scope.row.status==1">是</el-tag>
            <el-tag type="info" v-if="scope.row.status==0">否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="industry_name"
        label="行业"
        width="120"
        v-if="showColumns.industry"
      >
      </el-table-column>
      <el-table-column
        prop="phone"
        label="地区"
        width="120"
        v-if="showColumns.area"
      >
        <template slot-scope="scope">
          <div>
            {{scope.row.province}}{{scope.row.city}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="资讯标签"
        width="150">
        <template slot-scope="scope">
          <div @click.stop="showTag(scope.row)">
            <span style="cursor:pointer;color:#409EFF" v-if="scope.row.label_arr &&scope.row.label_arr.length!=0">{{scope.row.label_arr[0]}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="status_name"
        label="官方点评"
        v-if="showColumns.comment"
        show-overflow-tooltip
        width="120"
      >
        <template slot-scope="scope">
          <div>
            <el-tag type="success" v-show="scope.row.official_comment==1">是</el-tag>
            <el-tag type="info" v-show="scope.row.official_comment==0">否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="show_time"
        label="发布时间"
        show-overflow-tooltip
        width="180"
      >
      </el-table-column>
      <el-table-column label="操作" width='300'>
        <template slot-scope="scope">

          <el-button size="mini" type='primary' @click="toConsultionEditor(scope.row.id)">编辑</el-button>
          <span v-show="scope.row.new_comment==1"
                style="color:#fff;display:inline-block;background:red;border-radius:50%;width:10px;height:10px;text-align:center;line-height:10px;margin-left:10px"></span>
          <el-button size="mini" type='primary' @click="toConsultionComment(scope.row.id)">管理评论</el-button>
          <el-button size="mini" type='danger' @click="denyDemandApplication(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          :page-size="16"
          layout="prev, pager, next"
          :total="totalPage"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </el-col>
    <!-- 列表end -->


    <!-- 资讯详情 -->
    <el-dialog title="资讯详情" :visible.sync="consultationVisible" @close="initData">
      <el-form :label-position="'left'" label-width="150px">
        <el-form-item label="标题">
          <div>{{newsDetail.title}}</div>
        </el-form-item>
        <el-form-item label="资讯类型">
          <div>{{newsDetail.classify_name}}</div>
        </el-form-item>
        <el-form-item label="描述">
          <div>{{newsDetail.desc}}</div>
        </el-form-item>
        <el-form-item label="浏览">
          <div>{{newsDetail.browse_num}}</div>
        </el-form-item>
        <el-form-item label="关注">
          <div>{{newsDetail.attention_num}}</div>
        </el-form-item>
        <el-form-item label="行业">
          <div>{{newsDetail.industry_name}}</div>
        </el-form-item>
        <el-form-item label="地区">
          <div>{{newsDetail.province}}{{newsDetail.city}}</div>
        </el-form-item>
        <el-form-item label="资讯标签">
          <div class="tag-wrapper">
            <span v-for="(item,index) of newsDetail.label" :key="index">{{item.name}}</span>
          </div>
        </el-form-item>
        <el-form-item label="官方点评">
          <div>
            <el-tag type="success" v-show="newsDetail.official_comment==1">是</el-tag>
            <el-tag type="info" v-show="newsDetail.official_comment==0">否</el-tag>
          </div>
        </el-form-item>
        <el-form-item label="发布时间">
          <div>{{newsDetail.created_at}}</div>
        </el-form-item>
        <el-form-item label="更新时间">
          <div>{{newsDetail.updated_at}}</div>
        </el-form-item>
        <el-form-item label="链接">
          <el-button type="primary"
                     v-clipboard:copy="newsDetail.news_url"
                     v-clipboard:success="onCopy"
                     size="mini"
                     v-clipboard:error="onError">复制链接
          </el-button>
        </el-form-item>
        <el-form-item label="关联需求">
          <div style="cursor:pointer;color:#409EFF" @click.stop="showDemandDetail(item.id)"
               v-for="(item,index) of newsDetail.link_demand_info" :key="index">{{item.title}}
          </div>
        </el-form-item>

      </el-form>
    </el-dialog>
    <!-- 资讯详情end -->

    <!-- 标签 -->
    <el-dialog title="资讯标签" :visible.sync="tagVisible" @close="initData">
      <div class="tag-wrapper">
        <span v-for="(item,index) of tagList" :key="index">{{item}}</span>
      </div>
    </el-dialog>
    <!-- 标签end -->

    <!-- 需求详情 -->
    <demandDetailDialog :demandDetailVisible.sync="demandDetailVisible" :demandDetail="demandDetail"/>
  </div>
</template>
<script>
  import demandDetailDialog from '@/components/demandDetail';

  export default {
    name: 'member',
    components: {demandDetailDialog},
    data() {
      return {
        demandDetailVisible: false,//需求的详情
        demandDetail: {user_info: {}},
        consultationVisible: false,//查看资讯详情状态
        goodAtVisible: false,
        tagVisible: false,

        searchText: '',
        userAuthId: '',//选中的用户id

        consumtationOption: '',//头部筛选的资讯类型
        consumtationOptions: [
          {label: '全部', value: '-1'}
        ],

        officalCommentOption: '',//头部筛选是否官方点评
        officalCommentOptions: [
          {label: '全部', value: '-1'},
          {label: '是', value: 1},
          {label: '否', value: 2}

        ],
        showColumns: {
          industry: false,
          area: false,
          tag: false,
          comment: false,
          createdAt: false,
        },

        newsDetail: {},//资讯详情
        tagList: '',//弹窗的标签

        tableData: [{}],
        page: 1,
        totalPage: 0,
        loadingShow: false
      }
    },
    watch: {},
    methods: {
      async changeNewsStatus(id){
        const res =await this.$api.changeNewsStatus({
          id: id
        })
        if (res.data.level == 'success'){
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.getNewsList()
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      },
      async syncNewsMaterialFromWeChat(){
        let judge = null;
        let tit = '确认同步微信公众号文章?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          const res = await this.$api.syncNewsMaterialFromWeChat();
          if(res.data.level == 'success'){
            this.$message({
              type: 'success',
              message: res.data.message
            })
            let _this = this;
            setTimeout(function () {
              _this.getNewsList()
            },10000)
          }else {
            this.$message({
              type: 'error',
              message: res.data.message
            })
          }
        }

      },
      onCopy(e) {
        this.$message({
          type: 'success',
          message: '复制成功'
        })
      },
      onError(erro) {
        this.$message({
          type: 'error',
          message: '复制失败'
        })
      },
      search() {
        this.loadingShow = true;
        this.page = 1;
        this.getNewsList()
      },
      async showDemandDetail(id) {
        //查看需求详情
        this.demandDetail = {user_info: {}}
        let res = await this.$api.getDemandDetail({demand_id: id});
        if (res.data.level == 'success') {
          this.demandDetail = res.data.data
          this.demandDetailVisible = true
        }
      },
      async getNewsClassifyList() {
        //获取资讯类型
        let res = await this.$api.getNewsClassifyList();
        if (res.data.level == 'success') {
          this.consumtationOptions = res.data.data.map(item => {
            return {
              label: item.name,
              value: item.id
            }
          });
          this.consumtationOptions.unshift({label: '全部', value: '-1'})
        }
      },
      async getNewsList() {
        //获取列表
        let params = {
          page: this.page,
          limit: 10,
          keyword: this.searchText,
          classify_id: this.consumtationOption == -1 ? '' : this.consumtationOption,
          official_comment: this.officalCommentOption
        }
        let res = await this.$api.getNewsList(
          params);
        if (res.data.level == 'success') {
          this.tableData = res.data.data;
          this.totalPage = res.data.page_info.total;
        }
        this.loadingShow = false;
      },
      pageChange(e) {
        //翻页
        this.page = e;
        this.getNewsList();
      },
      async denyDemandApplication(id) {

        let judge = null;
        let tit = '删除该资讯?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.denyDemandApplicationHandle(id)
        }
        console.log(judge)
      },
      async denyDemandApplicationHandle(id) {
        let res = await this.$api.delNewsByAdmin({id: id});
        if (res.data.level == 'success') {
          this.$message.success(res.data.message)
          this.getNewsList()
        } else {
          this.$message.error(res.data.message)
        }
      },
      showTag(row) {
        //显示标签

        this.tagVisible = true;
        this.tagList = row.label_arr
      },
      async showConsultation(id) {
        //显示资讯详情
        //获取资讯详情
        let params = {
          id: id
        }
        let res = await this.$api.getNewsDetail(params);
        if (res.data.level == 'success') {
          this.consultationVisible = true;
          this.newsDetail = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      },
      toOfficialComment(id) {
        this.$router.push({name: 'Customer_detail', query: {id: id}})
      },
      toConsultionEditor(id) {
        //编辑
        this.$router.push({name: 'Consultation_editor', query: {id: id}})
      },
      toConsultionComment(id) {
        //管理评论
        this.$router.push({name: 'Consultation_comment', query: {id: id}})
      },
      initData() {

      }

    },
    mounted() {
      this.getNewsClassifyList()
      this.getNewsList()
    },
  }
</script>
<style lang="scss" scoped>
  .screen {
    margin-top: -10px !important;
  }

  .action-bar-wrapper {
    position: sticky;
    z-index: 1;
    top: -10px;
  }

  .action-bar {
    background-color: #f2f2f2;

    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .action-bar-input {
      width: 250px;
      margin-right: 14px;
    }

    .task-form-text {
      color: #666666;
    }
  }

  .el-table-style {
    width: 100%;
    border: 1px solid #f2f2f2;
  }

  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }

  .dialog-footer {
    text-align: center;
  }

  .tag-wrapper {
    span {
      padding: 20px
    }
  }

</style>
